
<div style="margin: 10px 10px 10px 10px">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input id="s_time" type="text" name="s_time" lay-verify="required"  placeholder="开始时间" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input id="e_time" type="text" name="e_time" lay-verify="required"  placeholder="结束时间" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <select name="chose_time" >
                    <option value="0">自定义查询时间</option>
                    <option value="1">1天</option>
                    <option value="7">7天</option>
                    <option value="15">15天</option>
                    <option value="30">30天</option>
                  </select>
                </div>
              </div>
            <div class="layui-inline" >
              <div class="layui-input-inline" style="width: 300px">
                <select name="chose_device" id="chose_device" xm-select="select" xm-select-type="1"  xm-select-search="" xm-select-height="36px" >
                </select>
              </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">查询</a>
            </div>
        </div>
    </form>
</div>
<!-- 健康数据表格开始 -->
<table class="layui-table" id="report_table" lay-filter="report_table"></table>
<script type="text/html" id="health_report_bar">
    <a class="layui-btn layui-btn-xs " lay-event="show_health_detail">图表展示</a>
</script>
<!-- 健康数据表格结束 -->
<!-- e_chart部分开始 -->
<div class="layui-coutainer" style="display:none" id="echarts_div">
 <div class="layui-row" >
  <!-- 雷达图开始 -->
  <div class="layui-col-lg6">
    <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
      <div class="layui-col-md12">
        <div class="layui-card">
          <!-- <div class="layui-card-header">健康数据雷达图</div> -->
          <div class="layui-card-body" style="text-align: center;">
             <div  id="radar_chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
   
  <div class="layui-col-lg6" >
    <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
      <div class="layui-col-md12">
        <div class="layui-card" >
          <!-- <div class="layui-card-header">人员基本信息</div> -->
          <div class="layui-card-body" style="">
             <div class="layui-row" id="person_base_info">
              <div class="layui-col-md6">
                <div class="layui-card" style="">
                  
                  <div class="layui-card-body" id="p_name">
                    姓名：
                  </div>
                   <div class="layui-card-body" id="p_sex">
                    性别：
                  </div>
                  <div class="layui-card-body" id="p_age">
                    年龄：
                  </div>
                  <div class="layui-card-body" id="p_department">
                    部门：
                  </div>
                </div>
              </div>
              <div class="layui-col-md6">
                <div class="layui-card">
                  
                  <div class="layui-card-body">
                    <img src="/static/show_icon/person.png" style="width: 120px;height: 160px" id="p_picture">
                  </div>
                </div>
              </div>
              <div class="layui-col-md12">
                <div class="layui-card">
                  <div class="">
                    附加信息：
                  </div>
                  <div class="">
                    备注信息：
                  </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- 曲线图 -->
  <div class="layui-row ">
    <div class="layui-col-md12" >
      <div class="layui-card">
        <!-- <div class="layui-card-header">健康数据详情</div> -->
        <div class="layui-card-body">
           <div  id="report_data_detail" style="width:100%;height:250px"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!-- e_chart部分结束 -->
<!-- js代码开始 -->
<!-- 引用echart插件 -->
<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript">
$('.layui-body').attr('style','padding:10px;bottom:0px;left:0px') 
$('.layui-side').hide()
form.render()
// 图标的宽度和高度的适应屏幕处理
var radar_chart_width=get_width/3
var radar_chart_height=get_height/2.6
$('#radar_chart').attr('style','height:'+radar_chart_height+'px;width:'+radar_chart_width+'px;')
$('#person_base_info').attr('style','height:'+radar_chart_height+'px;width:'+radar_chart_width+'px;')
var report_data_detail_height=get_height-radar_chart_height-100
var report_data_detail_width=get_width/1.1
$('#report_data_detail').attr('style','height:'+report_data_detail_height+'px;width:'+report_data_detail_width+'px;')

// 默认加载设备数据表格渲染函数
var ajax_url='mileage_report'
var table_show=function(table_data){

  table.render({
    elem: '#report_table',
    data: table_data,
    // toolbar: '#mileage_report_bar',
    title:'车辆运行统计数据',
    id:'mileage_report_table',
    cols: [
    [   {
        field: 'name', 
        title: '名称',
        sort:true,
        templet:function(row){
          console.log(row)
          var device_name=get_detail_from_id(device,row.device_id);
          return device_name['name']
        }}
      , {
        field: 'device_id',
        title: '设备ID',

    }, {
        field: 'total_mileage',
        title: '总里程',
        templet:function(row){
          return '<p>'+row.total_mileage+'km</p>'
        }
    }, 
    {
        field: 'speed',
        title: '平均速度',
        templet:function(row){
          return '<p>'+row.speed+'km/h</p>'
        }
    }, {
        field: 'drive_time',
        title: '行驶时长',
        templet:function(row){
          return '<p>'+row.drive_time+'小时</p>'
        }
    },   {
        field: 'all_stop_time',
        title: '停留超时',
        templet:function(row){
          return '<p>'+row.all_stop_time+'小时</p>'
        }  
    },  
    {
        field: 'alarm_status',
        title: '报警次数',
        templet:function(row){
          return '<p>0次</p>'
        }
    },
        {title: '操作',templet: '#alarm_report_bar', fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

// table_show([])
// 首次健康数据加载

get_info_ajax(ajax_url,'get_init_data',table_show)
      

// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {
  var search_key = data.field;
  var s_time=search_key['s_time'];
  var e_time=search_key['e_time'];
  // console.log(formSelects.value('select', 'val'))
  query_param={'hard_id':formSelects.value('select', 'val'),'s_time':s_time,'e_time':e_time,'chose_time':search_key['chose_time']}
  post_info_ajax(query_param,ajax_url,'query_report',table_show)
  // post_info_ajax(query_param,'table')
  return false;
});

//添加选择设备列表
fill_raido_func(device,'chose_device','user_name','device_id')
formSelects.render()


// 时间选择框渲染
laydate.render({
  elem: '#s_time'
  ,type: 'datetime'
  ,value:new Date(new Date(new Date().toLocaleDateString()).getTime())
  ,btns: ['clear','now', 'confirm']
});

laydate.render({
  elem: '#e_time'
  ,type: 'datetime'
  ,value:new Date()
  ,btns: ['clear','now', 'confirm']
});

</script>